<template>
    <div class="auctionNav">
        <div class="auctionTop">
            <div class="auTop1">
                <ul class="a1">
                    <li>在拍(68)</li>
                    <li>已结束(200)</li>
                </ul>
                <div class="a2">
                    <span>1-50条，共68条</span>
                    <div>
                        <el-pagination layout="prev, pager, next" :total="5" small="small" />
                    </div>
                </div>
            </div>
            <div class="auTop2">
                <ul class="b1">
                    <router-link to="textImg">
                        <li>
                            <el-icon>
                                <Film />
                            </el-icon> 图文
                        </li>
                    </router-link>
                    <router-link to="textView">
                        <li>
                            <el-icon>
                                <DocumentCopy />
                            </el-icon> 文本
                        </li>
                    </router-link>
                    <router-link to="">
                        <li style="color: #9A222C">
                            <el-icon>
                                <Menu />
                            </el-icon> 大图
                        </li>
                    </router-link>

                </ul>
                <ul class="b2">
                    <li>起拍价 <el-icon>
                            <DCaret class="icon" />
                        </el-icon>
                    </li>
                    <li>最高竞价 <el-icon>
                            <DCaret class="icon" />
                        </el-icon>
                    </li>
                    <li>竞标 <el-icon>
                            <DCaret class="icon" />
                        </el-icon> /浏览</li>
                    <li>剩余时间 <el-icon>
                            <DCaret class="icon" />
                        </el-icon>
                    </li>
                    <li>收藏</li>
                </ul>

            </div>
        </div>

    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({})
</script>

<style lang="scss" scoped>
.auctionNav {
    width: 1200px;
    margin: auto;
    margin-top: 20px;

    .auctionTop {
        width: 100%;
        height: 78px;
        background-color: #F5F5F1;


        .auTop1 {
            width: 1160px;
            height: 40px;
            margin: 0 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #eaeaea;
        }

        .auTop2 {
            width: 1200px;
            height: 37px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
    }

}

.auTop1 {
    .a1 {
        width: 202px;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #66667D;
        font-size: 14px;
    }

    .a2 {
        width: 200px;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #66667D;
        font-size: 14px;
    }
}

.auTop2 {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .b1 {
        width: 256px;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-left: 20px;

        li:hover {
            color: #9A222C;
        }

    }

    .b2 {
        width: 550px;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #333;

        .icon {
            color: #C7CACF;
        }
    }

    li {
        font-size: 14px;
        color: #66667D;
    }
}
</style>